<template>
    <h2>房型显示列表</h2>
    房型名称
    <input type="text" v-model="name"/>
    房型大小
    <input type="text" v-model="size"/>
    <input type="button" value="查询" @click="Show"/>
    <table border="1">
        <thead>
            <tr>
                <td>房型编号</td>
                <td>房型名称</td>
                <td>可住人数</td>
                <td>价格</td>
                <td>房型图片</td>
                <td>房型介绍</td>
                <td>房型大小</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
             <tr v-for="item in info">
                <td>{{item.trT_Id}}</td>
                <td>{{item.trT_Name}}</td>
                <td>{{item.trT_Person}}</td>
                <td>{{item.trT_Money}}</td>
                <td>
                    <img :src="item.trT_ImgUrl" style="height:60px;width:60px;"/>
                </td>
                <td>{{item.trT_Info}}</td>
                <td>{{item.size}}</td>
                <td>操作</td>
            </tr>
        </tbody>
    </table>

    总共有{{pageinfo.pageCount}}页
    总共有{{pageinfo.totalCount}}条数据
    当前在{{pageinfo.PageIndex}}/{{pageinfo.pageCount}}页

    <a href="#" style="margin-left:10px;" @click="FanYe('F')">首页</a>
    <a href="#" style="margin-left:10px;" @click="FanYe('L')">上一页</a>
    <a href="#" style="margin-left:10px;" @click="FanYe('N')">下一页</a>
    <a href="#" style="margin-left:10px;" @click="FanYe('E')">尾页</a>

    <select v-model="newye" @change="YeMa" style="margin-left:10px;">
        <option :value="1">1/页</option>
        <option :value="2">2/页</option>
        <option :value="3">3/页</option>
        <option :value="4">4/页</option>
    </select>

    <input type="tetx" v-model="index" style="width:50px;margin-left:10px;"/>
    <input type="button" value="跳转" @click="Tiao" style="margin-left:10px;"/>

</template>
<script setup lang="ts">
    import {ref,onMounted} from 'vue';
    import axios from 'axios';
    import {useRoute,useRouter} from 'vue-router';
    const route=useRoute();
    const router=useRouter();

    onMounted(()=>{
        Show();
    })

    const info=ref([{
        trT_Id: 1,
        trT_Name: "",
        trT_Person: 0,
        trT_Money: 0,
        trT_ImgUrl: "",
        trT_Info: "",
        size: 0
    }]);

    const pageinfo=ref({
        PageIndex:1,
        PageSize:2,
        totalCount:0,
        pageCount:0
    });

    const name=ref("");
    const size=ref(0);

    //显示
    const Show=()=>{
        axios.get("https://localhost:7038/api/RoomType/GetRoomTYpeByPage",{
            params:{
                name:name.value,
                size:size.value,
                PageIndex:pageinfo.value.PageIndex,
                PageSize:pageinfo.value.PageSize
            }
        })
        .then(res=>{
            console.log(res.data);
            info.value=res.data.page_Info;
            pageinfo.value.totalCount=res.data.totalCount;
            pageinfo.value.pageCount=res.data.pageCount;
        })
        .catch(err=>{
            console.log(err);
        })
    }

    //翻页
    const FanYe=(choose:any)=>{
        switch(choose){
            case 'F':
                pageinfo.value.PageIndex=1;
            break;
            case 'L':
                if(pageinfo.value.PageIndex<1+1){
                    alert('已经是第一页啦');
                    return;
                }
                pageinfo.value.PageIndex--;
            break;
            case 'N':
                if(pageinfo.value.PageIndex>pageinfo.value.pageCount-1){
                    alert('已经是最后一页啦');
                    return;
                }
                pageinfo.value.PageIndex++;
            break;
            case 'E':
                pageinfo.value.PageIndex=pageinfo.value.pageCount;
            break;
        }
        Show();
    }

    const newye=ref(0);
    //每页多少条
    const YeMa=()=>{
        pageinfo.value.PageSize=newye.value;
        Show();
    }

    const index=ref(0);
    //跳转页
    const Tiao=()=>{
        pageinfo.value.PageIndex=index.value;
        Show();
    }

</script>
